<!DOCTYPE HTML>
<html>
<head>
<title><?php echo $this->getTitle(); ?></title>
<?php echo $this->getJavascript(); ?>
<?php echo $this->getCss(); ?>
<style>
@media print {
	#wrapper, #footer {
		display: none;
	}

	#receipt {
		display: block !important;
	}
	
}
</style>
</head>
<body>
<div id="receipt" style="background-color: #FFF; position: absolute; font-family: courier; width: 430px; display:none;">
	<center>
	<h1>OFFICIAL RECEIPT</h1>
	<h3>SOLD BY: <?php echo $_SESSION['employee']->getEmployeeId(); ?>-<?php echo $_SESSION['employee']->getFirstName(); ?> <?php echo $_SESSION['employee']->getLastName(); ?></h3>
	<h3>DATE: <?php echo date("F d,Y");?></h3>
	</center>
	
	<hr />
	<table id="salesDetail" style="border: 1px solid #000; border-collapse: collapse; width: 430px; text-align: center;">
		
	</table>
</div>

<div id="wrapper">
	<?php TemplateHelper::template('header'); ?>
	
	<div>
		<a class="page-name-link" href="index.php?c=employee&m=home">HOME</a>  <span class="page-name-active">> SALES</span>
	</div>
	
	<div>
		<div class="employee-left-col">
			<fieldset id="fieldset-transaction">
			  	<legend>PRODUCT LIST</legend>
				<div id="accordion">
					<?php foreach ($this->display['categories'] as $category): ?>					
							<h3><?php echo $category->getCategoryName(); ?></h3>
							<div class="product-categories-products">
								<?php foreach($category->getProducts() as $product): ?>		
									<?php 
										$id = $category->getCategoryName() . '_' . $product->getProductName();
										
										$id = str_replace(' ', '_', $id);
										
										$id = str_replace('/', '_', $id);
									?>								
									<div class="product-box">
										<div class="product-image">
										<a href="<?php echo '#'.$id; ?>" class="product-box-dialog-opener">
											<img onmouseover="showName('<?php echo $product->getProductId(); ?>')" src="<?php echo $product->getImgDirectory(); ?>" title="<?php echo $product->getProductName(); ?>"/>
										</a>	
										</div>
										
										<a href="<?php echo '#'.$id; ?>" class="product-box-dialog-opener">
											<div id="prodName_<?php echo $product->getProductId(); ?>" class="product-image-name" style="display: none;">
											<?php echo $product->getProductName(); ?>
										</div>
										</a>
									</div>
									<!-- START: Dialog -->
									<div id="<?php echo $id; ?>" class="product-box-dialog" title="Place Order">
										<div class="product-box-info">
											<div class="product-box-info-left">
												<input type="hidden" value="0" id="product_qty" />
												<input type="hidden" value="<?php echo $product->getProductId(); ?>" id="product_id" />
												<div class="product-quantity-counter">0</div>
												<div class="product-quantity-counter-button">													
													<input type="button" value="-" class="minus-product button-jquery-ui" />
													<input type="button" value="+" class="add-product button-jquery-ui" />												
												</div>
											</div>
											<div class="product-box-info-right">
												<div style="text-align: center;" class="product-details-info">
													<span class="bold red">PRODUCT DETAILS</span>
													<hr />
												</div>
												<div class="product-details-info">
													<span class="bold">Product name:</span>
													<span><?php echo $product->getProductName(); ?></span>
												</div>
												<div class="product-details-info">
													<span class="bold">Price:</span>
													<span><?php echo $product->getProductPrice(); ?></span>
												</div>
												<div class="remaining-stock-parent product-details-info">
													<span class="bold">Remaining Stock:</span>
													<span class="remaining-stock-value"><?php echo $product->getProductQty(); ?></span>
												</div>
												<div class="add-product-btn"><input type="button" value="Add Order" class="button-add-order button-jquery-ui" /></div>
											</div>
											<div class="clear-both"></div>
										</div>
									</div>
									<!-- END: Dialog -->			
								<?php endforeach; ?>		
								<div class="clear-both"></div>
							</div>
					<?php endforeach; ?>
				</div>
			</fieldset>
		</div>
		<div id="orderSumarryBox" class="employee-right-col">
			<div class="CC">
				<fieldset id="fieldset-transaction">
				  	<legend>ORDER SUMMARY</legend>
				  	<div id="orderSumarryBoxList"></div>
					<div class="order-summary-button">
						<input type="button" id="completeOrder" value="Complete Order" class="button-jquery-ui" />
					</div>
					</fieldset>
				</div>
		</div>
		<div class="clear-both"></div>
	</div>
</div>
<div id="footer"><?php echo BaliwagConstant::PAGE_FOOTER_NOTE; ?></div>
<?php TemplateHelper::template('loading'); ?>
<?php TemplateHelper::template('confirmation'); ?>
<?php TemplateHelper::template('error'); ?>

<!-- START: Dialog -->
<div id="product_qty_edit" class="product-box-dialog" title="Place Order">
	<div class="product-box-info">
		<div id="product_edit" class="product-box-info-left">
			<input type="hidden" id="product_qty" />
			<input type="hidden" id="product_id" />
			<div id="edit_product_qty_text" class="product-quantity-counter">0</div>
			<div class="product-quantity-counter-button">													
				<input type="button" value="-" class="minus-product button-jquery-ui" />
				<input type="button" value="+" class="add-product button-jquery-ui" />												
			</div>
		</div>
		<div class="product-box-info-right">
			<div style="text-align: center;" class="product-details-info">
				<span class="bold red">PRODUCT DETAILS</span>
				<hr />
			</div>
			<div class="product-details-info">
				<span class="bold">Product name:</span>
				<span id="edit_product_name">XXXXXXXX</span>
			</div>
			<div class="product-details-info">
				<span class="bold">Price:</span>
				<span id="edit_product_price">XXXXXXXXXXX</span>
			</div>
			<div class="remaining-stock-parent product-details-info">
				<span class="bold">Remaining Stock:</span>
				<span id="edit_current_count" class="remaining-stock-value">XXXXXXXXXXX</span>
			</div>
			<div class="add-product-btn"><input type="button" value="Update Order" class="button-update-order button-jquery-ui" /></div>
		</div>
		<div class="clear-both"></div>
	</div>
</div>
<div id="product_receipt" class="product-box-dialog" title="Official Receipt"></div>
<!-- END: Dialog -->

</body>
</html>